<template>
  <el-dialog :visible.sync="visible" v-dialogDrag title="参会人员统计" class="tl-dialog" width="1080px" top="52px" :append-to-body="true" :modal-append-to-body="true" @open="open" @close="close">
    <div style="padding-bottom:10px">
      <div class="btns">
        <div style="margin-top:10px" v-if="!showSpecialContent">
          签到情况：
          <el-button v-bind:class="clickBtn === '3' ? 'personCount_click' : 'personCount'" class="personCount" @click="filterList('qry_signstate', 0, '3')">
            未签到<label v-bind:class="clickBtn === '3' ? 'staticCount_click' : 'staticCount'" class="staticCount">{{ staticModel.noSignCount }}</label></el-button
          >
          <el-button v-bind:class="clickBtn === '4' ? 'personCount_click' : 'personCount'" class="personCount" @click="filterList('qry_signstate', 1, '4')">
            签到<label v-bind:class="clickBtn === '4' ? 'staticCount_click' : 'staticCount'" class="staticCount">{{ staticModel.signCount }}</label></el-button
          >
          <el-button v-bind:class="clickBtn === '5' ? 'personCount_click' : 'personCount'" class="personCount" @click="filterList('qry_signstate', -1, '5')">
            不需签到<label v-bind:class="clickBtn === '5' ? 'staticCount_click' : 'staticCount'" class="staticCount">{{ staticModel.noNeedSignCount }}</label></el-button
          >
          <tl-help>
            通过指派他人替代参会的人员无需签到
          </tl-help>
          <el-button size="small" type="primary" icon="el-icon-download" @click="doExportExcel">导出</el-button>
        </div>
        <div style="margin-top:10px" v-else>
          签到情况：
          <el-button v-bind:class="clickBtn === '3' ? 'personCount_click' : 'personCount'" class="personCount" @click="filterList('qry_signstate', 0, '3')">
            未签到<label v-bind:class="clickBtn === '3' ? 'staticCount_click' : 'staticCount'" class="staticCount">{{ staticModel.noSignCount }}</label></el-button
          >
          <el-button v-bind:class="clickBtn === '4' ? 'personCount_click' : 'personCount'" class="personCount" @click="filterList('qry_signstate', 1, '4')">
            签到<label v-bind:class="clickBtn === '4' ? 'staticCount_click' : 'staticCount'" class="staticCount">{{ staticModel.signCount }}</label></el-button
          >
          <el-button size="small" type="primary" icon="el-icon-download" @click="doExportExcel">导出</el-button>
          <el-button v-if="sourceType === 'meetCreate' && showSpecialContent" size="small" type="primary" icon="el-icon-s-custom" @click="openInviteRef">邀请参会</el-button>
        </div>
      </div>
      <div>
        <!--表格渲染-->
        <el-table class="tl-table" ref="mainTable" height="320px" v-loading="loading" :data="datas" row-key="id" border fit @sort-change="doSortChange">
          <template v-if="showSpecialContent">
            <el-table-column type="index" label="序号" width="50px" header-align="center" align="center"> </el-table-column>
            <el-table-column prop="rolename" label="人员角色" width="180px" align="center"></el-table-column>
            <el-table-column prop="username" label="姓名" min-width="90px" align="center" sortable="custom" sort-by="username"></el-table-column>
            <el-table-column prop="usercode" label="工号" min-width="90px" align="center" sortable="custom" sort-by="usercpde"></el-table-column>
            <el-table-column prop="dispdeptcode" label="部门" min-width="150px" align="center" sortable="custom" sort-by="deptcode" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="isconfigure" label="实际邀请人员" width="150px" align="center"></el-table-column>
            <el-table-column prop="isattended" label="实际参会人员" width="150px" align="center"></el-table-column>
          </template>
          <template v-else>
            <el-table-column type="index" label="序号" width="50px" header-align="center" align="center"> </el-table-column>
            <el-table-column prop="username" label="姓名" min-width="90px" align="center" sortable="custom" sort-by="username"></el-table-column>
            <el-table-column prop="usercode" label="工号" min-width="90px" align="center" sortable="custom" sort-by="usercpde"></el-table-column>
            <el-table-column prop="dispdeptcode" label="部门" min-width="150px" align="center" sortable="custom" sort-by="deptcode" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="inviteusername" label="邀请人姓名" width="100px" align="center" sortable="custom" sort-by="inviteusername"></el-table-column>
            <el-table-column prop="dispinvitetype" label="邀请方式" width="120px" align="center" sortable="custom" sort-by="invitetype"></el-table-column>
            <el-table-column prop="dispsignstate" label="是否签到" width="100px" align="center" sortable="custom" sort-by="signstate"></el-table-column>
            <el-table-column prop="signdate" label="签到时间" width="180px" align="center" sortable="custom" sort-by="signdate"></el-table-column>
          </template>
          <el-table-column label="操作" max-width="90pvuex" v-slot="scope" fixed="right" v-if="sourceType === 'meetCreate'">
            <el-button type="text" :disabled="scope.row.signstate === 1 && !canSignUp" icon="el-icon-edit" style="margin-left:10px" @click.native="sign(scope.row.usercode, scope.row.username)">签到</el-button>
          </el-table-column>
        </el-table>
        <el-row class="pagebar" ref="pager">
          <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
        </el-row>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doCancelEdit">取消</el-button>
    </div>
    <tl-single-user-ref ref="inviteRef" @confirm="invitePersons"></tl-single-user-ref>
  </el-dialog>
</template>
<script>
/** mixins */
import { mixin_list } from "@tapui/mixins/mixin_list"
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from "@tapui/utils/http"
import TlSingleUserRef from "@/components/common/TlSingleUserRef.vue"
/** 子组件 */
/** VUE配置 */
export default {
  mixins: [mixin_list],
  components: { TlSingleUserRef },
  data() {
    return {
      url: {
        list: "/meet/personRecord/list",
        queryPersonStaticCount: "/meet/personRecord/queryPersonStaticCount",
        exportExcel: "/meet/personRecord/exportBigExcel",
        sign: "/meet/personRecord/sign",
        inviteToMeet: "/meet/personRecord/invite"
      },
      id: "",
      visible: false,
      staticModel: {},
      clickBtn: "",
      meetTitle: "",
      isQueryOnCreated: "false",
      // 是否展示联动列
      showSpecialContent: false
    }
  },
  computed: {
    existRole() {
      let existRole = false
      if (this.datas) {
        this.datas.forEach(row => {
          if (row.rolename) {
            existRole = true
          }
        })
      }
      return existRole
    }
  },
  props: {
    sourceType: {
      type: String,
      default: "meetCreate"
    },
    // 是否允许进行替人签到操作
    canSignUp: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 画面打开时对Table进行重新布局
    open() {
      this.$nextTick(_ => {
        if (this.$refs.mainTable) {
          this.$refs.mainTable.doLayout()
        }
      })
    },
    close() {
      this.$emit("refreshUser")
    },
    openInviteRef() {
      this.$refs.inviteRef.visible = true
    },
    async invitePersons(userInfo) {
      try {
        // 人员为空直接返回
        if (userInfo === void 0 || (userInfo.usercodes === "" || userInfo.usernames === "")) {
          return
        }
        //  进行人员邀请
        let param = {
          meetid: this.id,
          usercode: userInfo.usercodes,
          username: userInfo.usernames
        }
        let res = await postAction(this.url.inviteToMeet, param)
        if (res.success) {
        // 刷新页面
          this.$tap.message("邀请参会成功！")
          this.doQuery()
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 根据不同的状态筛选列表
    filterList(qryField, value, flag) {
      this.queryParam = {}
      if (this.clickBtn !== "" && this.clickBtn === flag) {
        this.clickBtn = ""
      } else {
        this.clickBtn = flag
        this.$set(this.queryParam, qryField, value)
      }
      this.$set(this.queryParam, "qry_meetid", this.id)
      this.doQuery()
    },
    // 画面取消
    doCancelEdit() {
      this.visible = false
    },
    // 查询人员统计数目
    queryPersonStaticCount() {
      if (this.url.queryPersonStaticCount) {
        getAction(this.url.queryPersonStaticCount, { meetid: this.id }).then(res => {
          if (res.success) {
            this.staticModel = res.result
          } else {
            this.$tap.alert("参会人员统计初始化失败", "warning")
          }
        })
      }
    },
    // 会议创建者进行批量人员签到
    sign(usercode, username) {
      if (this.url.sign) {
        postAction(this.url.sign, { meetid: this.id, replaceusercode: usercode, replaceusername: username }).then(res => {
          if (res.success) {
            this.$tap.message(res.message)
            this.doQuery()
            this.queryPersonStaticCount()
          } else {
            this.$tap.alert(res.message, "warning")
          }
        })
      }
    },
    beforeExportData() {
      let excelParam = {
        fileName: this.meetTitle + "签到情况"
      }
      this.queryParam = { ...excelParam, ...this.queryParam }
      return true
    },
    /** 加载数据之后 刷新签到统计情况 */
    afterLoadData() {
      this.queryPersonStaticCount()
      this.$nextTick(_ => {
        if (this.$refs.mainTable) {
          this.$refs.mainTable.doLayout()
        }
      })
    }
  }
}
</script>
